<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<style>
  div {
    width: 600px;
    height: 400px;
    position: relative;
  }

  img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  button {
    width: 40px;
    height: 60px;
    font-size: 28px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
  }

  #bu1 {
    position: absolute;
    top: 188px;
    left: 0px;
    cursor: pointer;
  }

  #bu2 {
    position: absolute;
    top: 188px;
    left: 568px;
    cursor: pointer;
  }

  ul {
    position: absolute;
    left: 6%;
    top: 368px
  }

  li {
    list-style: none;
    width: 40px;
    height: 20px;
    background: silver;
    opacity: 0.5;
    float: left;
    margin-left: 1px;
    cursor: pointer;
  }

  .bag {
    background: aqua;
  }
</style>

<body>
  <div>
    <img src="./imgea/0f7d9715-5f78-4ccd-bb3b-776290ee1af8.jpg" alt="">

  </div>
  <button id="bu1">
    <</button> <button id="bu2">>
  </button>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script>
  $(function () {
    var imgs = ["./imgea/0f7d9715-5f78-4ccd-bb3b-776290ee1af8.jpg",
      "./imgea/2cbaed62-b784-414f-8d47-5158459b099d.jpg",
      "imgea/2d1d32c3-86af-4d8b-8f5d-e771bf3cb096.jpg",
      "imgea/5957277e-f1cd-42f9-bca4-147c4cd43b3f.jpg",
      "imgea/a18369e8-d94c-4910-b6df-0a087cf44809.jpg",
      "imgea/ace4546e-4e92-439d-b7bc-b3addc1445fc.jpg",
      "imgea/fb772166-3d42-45ac-bf34-83899a17ef8a.jpg"
    ]
    var index = 0

    setInterval(function () {
      $("img").prop("src", imgs[index])

      index++
      if (index > 7) {
        index = 0
      }
      fun(index)
    }, 1000)

    $('#bu1').click(function () {

      // index = index==0?7:index-1
      var att = index == 0 ? 7 : index - 1
      index = att
      $("img").prop("src", imgs[index])
      console.log(index);
      fun(index)
    })

    $('#bu2').click(function () {

      index = index == 7 ? 0 : index + 1
      //  var att = index==7?0:index+1
      //  index=att
      $("img").prop("src", imgs[index])
      console.log(index);
      fun(index)
    })

    $("li").click(function () {
      index = $(this).index()
      $("img").prop("src", imgs[index])
      fun(index)
    })
  })

  function fun(index) {
    $("li").attr("class", "")
    $('li:eq(' + index + ')').attr("class", "bag")
  }
</script>

</html>